@page "/"
@using SerialPort.Desktop.Modules
@using System.Globalization
@using System.Text
@using SerialPort.Desktop.JSInterp

@inject IPopupService PopupService
@inject SerialJSInterp SerialJSInterp
@inject NavigationManager NavigationManager

<div>
    <div style="height: calc(100vh - 200px)">
        <div style="height: 100%;float: @(_settingOptions.DebugFormLocationType.ToString());width: 80%;">
            <MMonacoEditor Height="@("100%")" InitOptions="InitEditor" @bind-Value="_debugMessage"></MMonacoEditor>
        </div>
        <div style="width: 20%;height: 100%;padding: 8px;float: right;">
            <MSelect Items="_serialPortDtos"
            @bind-Value="_serialPortId"
                     ItemText="u => u.Name"
                     ItemValue="u => u.Id"
                     Label="串口选择"
                              Dense
                              Outlined>
            </MSelect>
            <MSelect Items="_baudRateDtos"
                     @bind-Value="_baudRateId"
                     ItemText="u => u.Value.ToString()"
                     ItemValue="u => u.Value"
                     Label="波特率"
                              Dense
                              Outlined>
            </MSelect>
            <MSelect Items="_stopBitDtos"
                     @bind-Value="_stopBitId"
                     ItemText="u => u.Value.ToString()"
                     ItemValue="u => u.Value"
                     Label="停止位"
                              Dense
                              Outlined>
            </MSelect>
            <MSelect Items="_dataBitDtos"
                     @bind-Value="_dataBitId"
                     ItemText="u => u.Value.ToString(CultureInfo.InvariantCulture)"
                     ItemValue="u => u.Value"
                     Label="数据位"
                              Dense
                              Outlined>
            </MSelect>
            <MSelect Items="_checkBitDtos"
                     @bind-Value="_checkBitId"
                     ItemText="u => u.Value.ToString()"
                     ItemValue="u => u.Value"
                     Label="校验位"
                              Dense
                              Outlined>
             </MSelect>
             <MButton @onclick="OpenSerialPort" Block Outlined>@OpenSerialPortText</MButton>
             <MDivider>设置</MDivider>
             <MTextField Style="height: 35px;" Label="发送间隔" @bind-Value="_sendInterval" Type="InputType.Number" Outlined Dense></MTextField>
             <MCheckbox @bind-Value="_sendTime"
                        Label="定时发送"
                        Style="width: 70px;float: left;height: 45px;"
                        Dense
                       Color="red"></MCheckbox>
            <MCheckbox @bind-Value="HexSend"
                       Label="Hex发送"
                        Style="width: 70px;float: left;height: 45px;"
                       Dense
                       Color="red"></MCheckbox>
            <MCheckbox @bind-Value="HexShow"
                       Label="Hex显示"
                        Style="width: 70px;float: left;height: 45px;"
                       Dense
                       Color="red"></MCheckbox>
         </div>
     </div>
     <div>
         <MTabs @bind-Value="_tab">
             <MTab Value="1">
                 发送
             </MTab>
             <MTab Value="2">
                 帮助
             </MTab>
         </MTabs>
         <MTabsItems @bind-Value="_tab">
             <MTabItem Value="1">
                 <SendMessage OnSendMessage="OnSendMessage" SendDisabled="@(serialPort==null||serialPort.IsOpen==false)" />
             </MTabItem>
             <MTabItem Value="2">
                 <Help/>
             </MTabItem>
        </MTabsItems>
    </div>
</div>
<MFooter App>
    <MButton Icon Small OnClick="GoSetting"><MIcon>mdi-cog-outline</MIcon></MButton>
    <span style="color:red;margin-left:8px;">open666.cn</span>
</MFooter>